<template>
	<view>
		<navbar title="" background="linear-gradient(90deg, #FF6D1B 0%, #FF8E20 100%)" titleColor="#FFFFFF" backColor="#FFFFFF">
		</navbar>
		<view class="success">
			<image src="@/static/image/money/success.png" mode=""  style="width: 100rpx;height: 100rpx;" ></image>
			
		</view>
		<view class="success-font">
			{{$t("success.success")}}
		</view>
		<view class="box">
			<view class="month">
				<view class="time">
					{{info.presell_end_time | monthFormat}}
				</view>
				<view class="time">
					{{info.start_time | monthFormat}}
				</view>
				<view class="time">
					{{info.end_time | monthFormat}}
				</view>
				<view class="time">
					{{info.end_days | monthFormat}}
				</view>
			</view>
			<view class="shape">
					<view :class="list[0] ? 'cirle1' : 'cirle'">
						
					</view>
					<view :class="list[0] ? 'shape-line1' : 'shape-line'">
						
					</view>
					<view :class="list[0] ? 'cirle1' : 'cirle'">
						
					</view>
					<view :class="list[0] ? 'shape-line1' : 'shape-line'">
						
					</view>
					<view :class="list[0] ? 'cirle1' : 'cirle'">
						
					</view>
					<view :class="list[0] ? 'shape-line1' : 'shape-line'">
						
					</view>
					<view :class="list[0] ? 'cirle1' : 'cirle'">
						
					</view>
			</view>
			<view class="month-details">
				<view class="" style="width: 140rpx;">
					{{$t("success.ends")}}
				</view>
				<view class="" style="width: 140rpx;">
					{{$t("success.interest")}}
				</view>
				<view class="" style="width: 140rpx;">
					{{$t("success.earn")}}
				</view>
				<view class="" style="width: 140rpx;">
					{{$t("financial.receive")}}
				</view>
			</view>
		</view>
		<view class="tip">
			<text>{{$t("success.warm")}}</text>
			<view class="" style="margin-top: 30rpx;">
				{{$t("success.more")}}
			</view>
			<view class="" style="margin-top: 30rpx;" v-if="info.yield_by_rate == '0'">
				<text>{{$t("financial.reach")}}</text>
			</view>
			<view class="" style="margin-top: 30rpx;" v-else>
				<text>{{$t("success.adding")}}</text> <text style="color: #5BC281;"><u>{{info.adding}}</u></text> 
				<text>{{$t("success.by")}}</text> <text style="color: #5BC281;"><u>{{info.yield_by_rate}}%</u></text>
			</view>
		</view>
		<view class="button">
			<view class="home" @click="navTo('/pages/team/invite')">
				{{$t("success.invite")}}
			</view>
			<view class="share" @click="navTo('/pages/money/myFinancial')">
				{{$t("success.home")}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {},
				list:[8,8,9,8]
			};
		},
		onLoad(option) {
			this.info = JSON.parse(option.data);
		},
		filters: {
			monthFormat(val) {
				if (!val) {
					return ''
				}
				const monthStr = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sept','Oct','Nov','Dec'];
				const time = new Date(val*1000);
				console.log(time);
				return monthStr[time.getMonth()] + ' ' + time.getDate();
			}
		},
		methods:{
			navTo(val){
				uni.navigateTo({
					url: val
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #FFFFFF;
	}
	
	.success{
		width: 100rpx;
		margin: 100rpx auto 40rpx;
	}
	.success-font{
		font-size: 36rpx;
		font-family: Rubik;
		font-weight: 400;
		color: #0F0F0E;
		text-align: center;
		line-height: 36rpx;
	}
	.box{
		width: 690rpx;
		background: #F6F6F6;
		border-radius: 20rpx;
		margin: 80rpx auto;
		padding: 0 29rpx 30rpx;
		.month{
			padding: 30rpx 4rpx 36rpx 11rpx;
			display: flex;
			justify-content: space-between;
			.time{
				font-size: 32rpx;
				font-family: Rubik;
				font-weight: 400;
				color: #0F0F0E;
			}
		}
		.shape{
			display: flex;
			align-items: center;
			padding-left: 48rpx;
			.cirle{
				width: 20rpx;
				height: 20rpx;
				background: #A8ACC0;
				border-radius: 50%;
			}
			.cirle1{
				width: 20rpx;
				height: 20rpx;
				background: #FC3E32 ;
				border-radius: 50%;
			}
			.shape-line{
				width: 160rpx;
				height: 6rpx;
				background: #A8ACC0;
				
			}
			.shape-line1{
				width: 160rpx;
				height: 6rpx;
				background-color:  #FC3E32;
			}
			
		}
		.interest{
			font-size: 26rpx;
			font-family: Rubik;
			font-weight: 400;
			color: #65676B;
			line-height: 26rpx;
			text-align: center;
		}
		.month-details{
			display: flex;
			justify-content: space-between;
			box-sizing:border-box;
			font-size: 26rpx;
			font-family: Rubik;
			font-weight: 400;
			color: #AAAAAA;
			margin-top: 24rpx;
			text-align: center;
			
		}
	}
	.tip{
		padding: 69rpx 39rpx 179rpx;
		font-size: 26rpx;
		font-family: Rubik;
		font-weight: 400;
		color: #0F0F0E;
	}
	.button{
		display: flex;
		padding: 0 30rpx;
		display: flex;
		justify-content: space-between;
		line-height: 90rpx;
		font-size: 30rpx;
		font-family: Rubik;
		font-weight: 400;
		color: #65676B;
		text-align: center;
		.home{
			width: 330rpx;
			height: 90rpx;
			background: #FF8E20;
			border-radius: 6rpx;
			color: #FFFFFF;
		}
		.share{
			width: 330rpx;
			height: 90rpx;
			border: 2rpx solid #AAAAAA;
			border-radius: 12rpx;
			color: #65676B;
		}
	}
</style>
